<template>
	<view class="content">
		<view class="set-item">
			<view class="set-item-label"><text>手机号</text></view>
			<view class="set-item-value">{{ data.phoneData.mobile }}</view>
		</view>
		<view class="set-item">
			<view class="set-item-label"><text>允许我的手机号对外展示</text></view>
			<view class="set-item-value">
				<switch :checked="data.phoneData.isshowmobile === '1' ? true : false" @change="changeIsShowPhoneNumber" style="transform:scale(0.8)" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import { getPhoneNumber, editPhoneNumber } from '@/subpages/common/api/set.js';
const data = reactive({
	phoneData: {}
});
//修改是否展示
async function changeIsShowPhoneNumber(e) {
	let isshowmobile = e.detail.value ? '1' : '2';
	const res = await editPhoneNumber({ isshowmobile: isshowmobile });
}
//获取手机号和展示状态
async function getPhoneNumberRequest() {
	const res = await getPhoneNumber();
	data.phoneData = res.data;
}
getPhoneNumberRequest();
</script>
<style lang="scss">
@import '@/common/css/base.scss';
page {
	background-color: $bgColor;
}
</style>
<style lang="scss" scoped>
@import '@/subpages/common/css/set.scss';
.content {
	margin: 28rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background-color: #fff;
	.set-item-value {
		color: #666;
	}
}
</style>
